<template>
  <div class="app-logo" :class="{ 'logo-small': size === 'small', 'logo-large': size === 'large' }">
    <svg 
      :width="logoSize" 
      :height="logoSize" 
      viewBox="0 0 100 100" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
      class="logo-icon"
    >
      <!-- 外圆环 -->
      <circle 
        cx="50" 
        cy="50" 
        r="45" 
        :stroke="iconColor" 
        stroke-width="3" 
        fill="none"
      />
      
      <!-- 内部图标 - RAG 字母设计 -->
      <g transform="translate(25, 30)">
        <!-- R -->
        <path 
          d="M 5 5 L 5 35 M 5 5 L 15 5 Q 20 5 20 12 Q 20 19 15 19 L 5 19 M 15 19 L 20 35" 
          :stroke="iconColor" 
          stroke-width="3" 
          stroke-linecap="round" 
          stroke-linejoin="round"
        />
        
        <!-- A -->
        <path 
          d="M 25 35 L 30 5 L 35 35 M 27 20 L 33 20" 
          :stroke="iconColor" 
          stroke-width="3" 
          stroke-linecap="round" 
          stroke-linejoin="round"
        />
        
        <!-- G -->
        <path 
          d="M 50 10 Q 45 5 40 10 L 40 30 Q 40 35 45 35 L 48 35 M 48 35 L 48 22 L 45 22" 
          :stroke="iconColor" 
          stroke-width="3" 
          stroke-linecap="round" 
          stroke-linejoin="round"
        />
      </g>
      
      <!-- 装饰点 -->
      <circle cx="50" cy="85" r="3" :fill="iconColor" opacity="0.6"/>
      <circle cx="15" cy="50" r="2" :fill="iconColor" opacity="0.4"/>
      <circle cx="85" cy="50" r="2" :fill="iconColor" opacity="0.4"/>
    </svg>
    
    <span v-if="showText" class="logo-text">{{ text }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  size: {
    type: String,
    default: 'medium', // small, medium, large
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  color: {
    type: String,
    default: 'primary' // primary, white, dark
  },
  showText: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: 'RAG AI'
  }
})

const logoSize = computed(() => {
  const sizes = {
    small: 32,
    medium: 48,
    large: 64
  }
  return sizes[props.size] || sizes.medium
})

const iconColor = computed(() => {
  const colors = {
    primary: '#1F8EFA',
    white: '#FFFFFF',
    dark: '#2F3B52'
  }
  return colors[props.color] || colors.primary
})
</script>

<style scoped>
.app-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  user-select: none;
}

.logo-icon {
  display: block;
  transition: transform var(--transition-normal);
}

.app-logo:hover .logo-icon {
  transform: scale(1.05);
}

.logo-text {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  letter-spacing: 1px;
}

.logo-small .logo-text {
  font-size: var(--font-size-sm);
}

.logo-large .logo-text {
  font-size: var(--font-size-2xl);
}
</style>
























